import { Table, Button, Skeleton, Modal, Space } from 'antd'
import ContentLayout from '@/layouts/ContentLayout'
import { useEffect, useState } from 'react';
import ArrayUtils from '@/utils/ArrayUtils';
import { PROJECT_QA_CASE_SCENE } from '@/consts/project'
import CheckActon from '../../CheckActoin'
import QaCaseAddModal from './QaCaseAddModal';
import UserBrief from '@/components/UserBrief'
import { connect } from 'umi';
import { pageQaCase, deleteCase } from '@/services/project/qaCase'
import TextButton from '@/components/TextButton';
import QaCaseDetailModal from './QaCaseDetailModal';

const QaCaseList = (props) => {

    const {
        qaDetail,
        projectId,
        dispatch,
    } = props;

    const [showMe, setShowMe] = useState(true);
    const [QaCaseAddModalVisiable, setQaCaseAddModalVisiable] = useState()
    const [qaCasePage, setQaCasePage] = useState()
    const [qaCasePageLoading, setQaCasePageLoading] = useState(false);
    const [qaCaseDetailVisiable, setQaCaseDetailVisiable] = useState(false);
    const [selectQaCaseDetail, setSelectQaCaseDetail] = useState(false)

    const [params, setParams] = useState({

    })

    useEffect(() => {
        onParamChange()
    }, [qaDetail])

    const onParamChange = (param) => {
        if (param && !param.pageNum) {
            param.pageNum = 1;
        }
        let newParams = { ...params, ...param }
        setParams(newParams)
        queryQaCasePage(newParams)
    }

    const queryQaCasePage = (queryParams) => {
        setQaCasePageLoading(true)
        pageQaCase(projectId, qaDetail.id, (queryParams || params))
            .then((result) => {
                setQaCasePage(result.data);
                setQaCasePageLoading(false)
            })
    }


    const tableColumns = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: "20%",
            fixed: 'left',
            ellipsis: true,
            render: (text, record) => <TextButton onClick={() => {
                setSelectQaCaseDetail(record)
                setQaCaseDetailVisiable(true);
            }}>{record.name}</TextButton>,
            sorter: (a, b) => a.name.localeCompare(b.name),
        },

        {
            title: '阶段类型',
            dataIndex: 'scene',
            key: 'scene',
            width: "72px",
            render: (text, record) => PROJECT_QA_CASE_SCENE[record.scene].name,
        },
        {
            title: '模块',
            dataIndex: 'moduleName',
            ellipsis: true,
            key: 'module_name',
        },
        {
            title: '负责人',
            dataIndex: 'userId',
            ellipsis: true,
            key: 'userId',
            width: "14%",
            render: (text, record) => <UserBrief user={record.user}></UserBrief>,
        },
        {
            title: '执行次数',
            dataIndex: 'runCnt',
            key: 'runCnt',
            width: "72px",
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: "160px",
            sorter: (a, b) => a.createTime.localeCompare(b.createTime),
            defaultSortOrder: 'descend'
        }
    ]

    const actionColums = [{
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: "100px",
        fixed: 'left',
        render: (text, record) => (
            <Space>
                <TextButton onClick={() => {
                    setSelectQaCaseDetail(record);
                    setQaCaseAddModalVisiable(true)
                }}>修改</TextButton>
                <TextButton type="danger" onClick={() => {
                    Modal.confirm({
                        title: '删除用来',
                        content: `确认删除部门：${record.name}`,
                        okText: '确认',
                        cancelText: '取消',
                        onOk: (v) => {
                            deleteCase(projectId, qaDetail.id, record.id)
                                .then(({ success }) => {
                                    if (success) {
                                        onParamChange();
                                    }
                                })
                            return Promise.resolve()
                        }
                    })
                }}>删除</TextButton>
            </Space>
        )
    }]

    const filterColumn = (tableColumns) => {

        return [...tableColumns, ...actionColums];
    }

    const queryItems = [
        {
            name: "inScene",
            label: "阶段类型",
            isMain: true,
            type: "tagSelect",
            options: ArrayUtils.jsonToArray(PROJECT_QA_CASE_SCENE).map((item) => ({
                value: item.key,
                label: item.value.name
            }))
        },
        {
            name: "likeName",
            label: "名称",
            isMain: false,
            type: "input",
        },
        {
            name: "inUserId",
            label: "负责人",
            isMain: false,
            type: "input",
        }
    ]

    const actionHeader = [
        <Button type="primary" size="middle" onClick={() => {
            setSelectQaCaseDetail(null);
            setQaCaseAddModalVisiable(true)
        }}>
            新增
        </Button>,
        <CheckActon
            check={showMe}
            onChange={(value) => {
                setShowMe(value)
            }}
            label={'只看我的'}
        />
    ];

    if (!qaDetail) {
        return <Skeleton></Skeleton>
    }

    return (<>
        <ContentLayout
            queryItems={queryItems}
            actionHeader={actionHeader}
            onQueryChange={(params) => {
                onParamChange(params)
            }}
            style={{ minWidth: "100%" }}
            content={
                <Table
                    onChange={(pagination, filters, sorter) => {
                        onParamChange({
                            pageNum: pagination.pageSize === params.pageSize ? pagination.current : 1,
                            pageSize: pagination.pageSize
                        }, true)
                    }}
                    columns={filterColumn(tableColumns)}
                    rowKey="id"
                    loading={qaCasePageLoading}
                    dataSource={qaCasePage && qaCasePage.list}
                    pagination={{
                        position: ["bottomCenter"],
                        showSizeChanger: true,
                        pageSize: params.pageSize || 10,
                        total: qaCasePage && qaCasePage.count,
                        current: qaCasePage && qaCasePage.pageNum,
                        pageSizeOptions: [10, 20, 50],
                        showTotal: (total, range) => `总数： ${total} `
                    }}
                    size="small"
                    onRow={record => {
                        return {
                            onClick: () => {

                            }
                        }
                    }}
                >
                </Table>
            }
        />
        <QaCaseAddModal
            visible={QaCaseAddModalVisiable}
            projectId={projectId}
            projectQaItemId={qaDetail.id}
            qaDetail={qaDetail}
            projectProdItemId={qaDetail.projectProdItemId}
            defaultValue={selectQaCaseDetail}
            onCancel={() => {
                setQaCaseAddModalVisiable(false)
            }}
            onSaveSuccess={() => {
                setQaCaseAddModalVisiable(false);
                onParamChange({})
            }}
        ></QaCaseAddModal>
        <QaCaseDetailModal
            qaCase={selectQaCaseDetail}
            visible={qaCaseDetailVisiable}
            onCancel={() => {
                setQaCaseDetailVisiable(false)
            }}
        >
        </QaCaseDetailModal>
    </>)

}


export default connect(({ }) => ({
}))(QaCaseList);
